<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>个人中心</title>
    {% load static %}
    <link rel="shortcut icon" href="{% static '/images/bitbug_favicon.ico' %}">
	<link rel="stylesheet" href="{% static '/css/reset.css' %}" type="text/css">
	<link rel="stylesheet" href="{% static '/lib/bootstrap/css/bootstrap.min.css' %}" type="text/css">
	<link rel="stylesheet" href="{% static '/lib/font-awesome-4.7.0/css/font-awesome.min.css' %}" type="text/css">
	<script src="{% static '/lib/jquery/jquery-3.4.1.js' %}"  type="text/javascript"></script>
    <script src="{% static '/lib/jquery/ajax_csrfToken.js' %}" type="text/javascript"></script>
	<script src="{% static '/lib/bootstrap/js/bootstrap.min.js' %}"  type="text/javascript"></script>
    <script src="{% static '/lib/uploadPreview/uploadPreview.js' %}" type="text/javascript"></script>
    <script src="{% static '/lib/layDate/laydate.js' %}" type="text/javascript"></script>
	<link rel="stylesheet" href="{% static '/css/user_style.css' %}" type="text/css">
</head>
<body>
	<!-- 头部 -->
	<section class="headerwrap">
    	<header>
            <div class="header">
                <div class="top">
                    <div class="wp container">
                        <div class="fl">
                        	<p>服务电话：
                        		<b>33333333</b>
                        	</p>
                        </div>
                        <!--登录后跳转-->
                        {% if request.user.is_authenticated %}
                        <div class="personal" style="display: none">
                            <dl class="user fr">
                                <dd>root
                                	<img class="down fr" src="{% static 'images/icon/top_down.png' %}"/>
                                </dd>
                                <dt>
                                	<img src="{{ STATIC_URL }}{{ request.user.image }}"/>
                                </dt>
                            </dl>
                            <div class="userdetail">
                            	<dl>
                                	<dt>
                                		<img src="{{ STATIC_URL }}{{ request.user.image }}"/>
                                	</dt>
                                	<dd>
                                    	<h2>{{ request.user.nick_name }}欢迎！</h2>
									    <p>{{ request.user.username }}</p>
                                	</dd>
                            	</dl>
                            	<div class="btn">
                            		<a class="personcenter fl" href="{% url 'users:user_info' %}">   进入个人中心</a>
                            		<a class="fr" href="{% url 'logout' %} }}">退出</a>
                        		</div>
                        	</div>
                        </div>
                        {% else %}
                            <a style="color:white" class="fr registerbtn" href="{% url '/index' %}">返回首页</a>
                        {% endif %}
                    </div>
                </div>
                <div class="middle">
                    <div class="wp container">
                        <a href="/">
                        	<img class="fl" src="{% static 'images/logo2.png' %}"/>
                        </a>
                        <h1>我的电影之家</h1>
                    </div>
                </div>
            </div>
    	</header>
	</section>
    <!-- 页面导航 -->
	<section class="nav">
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="/">首页</a>></li>
                <li><a href="{% url 'users:user_info' %}">个人中心</a>></li>
                <li>个人信息</li>
            </ul>
        </div>
    </section>
    <section>
        <div class="wp list personal_list">
            <div class="left">
                <ul id="myTab">
                    <li class="active"><a href="#my_info" data-toggle="tab">个人信息</a></li>
                    <li><a href="#my_recommend" data-toggle="tab" id="user_recommend">我的推荐</a></li>
                    <li><a href="#my_favorite" data-toggle="tab" id="user_collect">我的收藏</a></li>
                    <li><a href="#my_browsingHistory" data-toggle="tab" id="user_browse">历史浏览</a></li>
                </ul>
            </div>
            <div class="right">
                <div class="personal_des tab-content" id="myTabContent">
                    <!-- 个人信息 -->
                    <div class="tab-pane fade in active" id="my_info">
                        <div class="head">
                            <h1>个人信息</h1>
                        </div>
                        <div class="inforcon">
                            <div class="left">
                                <iframe id='frameFile' name='frameFile' style='display: none;'></iframe>
                                <form class="clearfix" id="jsAvatarForm" enctype="multipart/form-data" autocomplete="off" method="post" action="{% url 'users:image_upload' %}" target='frameFile'>
                                    <label class="changearea" for="avatarUp" id="warp">
                                        <div id="avatardiv" class="pic">
                                            <img class="js-img-show" id="avatarShow" src="{{ MEDIA_URL }}{{ request.user.image }}" height="100" width="100">
                                        </div>
                                        <span class="fl upload-inp-box">
                                            <span class="btn" id="jsAvatarBtn">修改头像</span>
                                            <input type="file" name="image" id="avatarUp" class="js-img-up">
                                        </span>
                                    </label>
                                    {% csrf_token %}
                                </form>
                                <div>
                                    <a href="#changePassword" data-toggle="tab">
                                        <div class="btn" data-toggle="modal" data-target="#myModal" id="jsUserResePwd">修改密码</div>
                                    </a>
                                </div>
                            </div>
                            <form id="jsEditUserForm" class="perinform" autocomplete="off">
                                <ul class="right">
                                    <li>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：
                                        <input type="text" name="nick_name" id="nick_name" value="{{ request.user.nick_name }}" maxlength="10">
                                        <i class="error-tips"></i>
                                    </li>
                                    <li>生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日：
                                        <input type="text" id="birth_day" name="birday" value="{{ request.user.birthday|default_if_none:'' }}" readonly="readonly"/>
                                        <i class="error-tips"></i>
                                    </li>
                                    <li>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：
                                        <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <input type="radio"  name="gender"  value="male" {% if request.user.gender == 'male' %} checked="checked" {% endif %}>男</label>
                                        <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <input type="radio" name="gender" value="female" {% if request.user.gender == 'female' %} checked="checked" {% endif %}>女</label>
                                    </li>
                                    <li class="p_infor_city">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：
                                        <input type="text" name="address" id="address" placeholder="请输入你的地址" value="{{ request.user.address }}" maxlength="20">
                                        <i class="error-tips"></i>
                                    </li>
                                    <li>手&nbsp;&nbsp;机&nbsp;&nbsp;号：
                                        <input type="text" name="mobile" id="mobile" placeholder="请输入你的手机号码" value="{{ request.user.mobile|default_if_none:'' }}" maxlength="10">
                                    </li>
                                    <li>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：
                                        <input class="borderno" type="text" name="email" readonly="readonly" value="{{ request.user.email }}"/>
                                        <span class="changeemai_btn">
                                            <!-- 利用冒泡机制触发 -->
                                            <a href="#changeEmail"  data-toggle="tab">
                                                <div data-toggle="modal" data-target="#myModal">[修改]</div>
                                            </a>
                                        </span>
                                    </li>
                                    <li class="heibtn">
                                        <a href="#saveInfo" data-toggle="tab">
                                            <div class="btn" data-toggle="modal" data-target="#myModal" id="jsEditUserBtn">保存</div>
                                        </a>
                                    </li>
                                </ul>
                            {% csrf_token %}
                            </form>
                        </div>
                    </div>
                    <!-- 我的推荐 -->
                    <div class="tab-pane fade" id="my_recommend">
                        <div class="head">
                            <h1>我的推荐</h1>
                        </div>
                        <div class="body">
                            {% for movie in movie_recommend %}
					            <div class="movie">
					            	<a href="{% url 'movieinfo:movie_detail' movie.name_id %}">
					            		<img src="{{ MEDIA_URL }}{{ movie.image }}">
					            		<span>{{ movie.name }}</span>
					            	</a>
					            </div>
                            {% endfor %}
                        </div>
                    </div>
                    <!-- 我的收藏 -->
                    <div class="tab-pane fade" id="my_favorite">
                        <div class="head">
                            <h1>我的收藏</h1>
                        </div>
                        <div class="body">
                            {% for movie in fav_list %}
					            <div class="movie">
					            	<a href="{% url 'movieinfo:movie_detail' movie.id %}">
					            		<img src="{{ MEDIA_URL }}{{ movie.image }}">
					            		<span>{{ movie.name }}</span>
					            	</a>
					            </div>
                            {% endfor %}
                        </div>
                    </div>
                    <!-- 历史浏览 -->
                    <div class="tab-pane fade" id="my_browsingHistory">
                        <div class="head">
                            <h1>历史浏览</h1>
                        </div>
                        <div class="body">
                            {% for movie in bro_list %}
					            <div class="movie">
					            	<a href="{% url 'movieinfo:movie_detail' movie.id %}">
					            		<img src="{{ MEDIA_URL }}{{ movie.image }}">
					            		<span>{{ movie.name }}</span>
					            	</a>
					            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 模态窗体 -->
    <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
        <div class="modal-dialog ">
            <div class="modal-content tab-content">
                <!-- 修改密码 -->
                <div class="tab-pane" id="changePassword">
                    <!-- 头部 -->
                    <div class="modal-header">
                        <button data-dismiss="modal" class="close" type="button">
                            <span aria-hidden="true">×</span> 
                        </button>
                        <h4 class="modal-title">修改密码</h4>
                    </div>
                    <!-- 内容 -->
                    <div class="modal-body">
                        <form autocomplete="off" id="jsResePwdForm">
                            <div class="box">
                                <span class="word2">新&nbsp;&nbsp;密&nbsp;&nbsp;码</span>
                                <input type="password" id="pwd" name="password1" placeholder="6-20位非中文字符">
                            </div>
                            <div class="box">
                                <span class="word2">确定密码</span>
                                <input type="password" id="repwd" name="password2"  placeholder="6-20位非中文字符">
                            </div>
                            <div id="jsReadPwdTip" style="display: none"></div>
                            {% csrf_token %}
                        </form>
                    </div>
                    <!-- 底部 -->
                    <div class="modal-footer">
                        <div class="btn">
                            <input id="jsResetPwdBtn" type="button" value="提交"/>
                        </div>
                    </div>
                </div>
                <!-- 修改邮箱 -->
                <div class="tab-pane" id="changeEmail">
                    <!-- 头部 -->
                    <div class="modal-header">
                        <button data-dismiss="modal" class="close" type="button">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title">修改邮箱</h4>
                    </div>
                    <!-- 内容 -->
                    <div class="modal-body">
                        <p>请输入新的邮箱地址</p>
                        <form id="jsChangeEmailForm" autocomplete="off">
                            <div class="box">
                                <input class="fl" name="email" id="jsChangeEmail" type="text" placeholder="输入重新绑定的邮箱地址">
                            </div>
                            <div class="box">
                                <input class="fl email_code" type="text" id="   jsChangeEmailCode" name="code" placeholder="输入邮箱验证码">
                                <input class="getcode getting" type="button" id="jsChangeEmailCodeBtn" value="获取验证码">
                            </div>
                            <div id="jsChangeEmailTips" style="display:none;"></div>
                            {% csrf_token %}
                        </form>
                    </div>
                    <!-- 底部 -->
                    <div class="modal-footer">
                        <div class="btn">
                            <input class="changeemai_btn" id="jsChangeEmailBtn" type="button" value="提交">
                        </div>
                    </div>
                </div>
               <!-- 保存信息 -->
                <div class="tab-pane" id="saveInfo">
                    <!-- 头部 -->
                    <div class="modal-header">
                        <button data-dismiss="modal" class="close" type="button">
                            <span aria-hidden="true">×</span>
                            <span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title" id="save_situation"></h4>
                    </div>
                    <!-- 内容 -->
                    <div class="modal-body">
                        <div class="successbox">
                            <div class="cont">
                                <img src="#" id="icon">
                                <h2 id="save_information"></h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="{% static '/js/users_ajax.js' %}" type="text/javascript"></script>
<script>
    //用户个人中心收藏显示
    {#$('#user_collect').on('click',function(){#}
    {#    $.ajax({#}
    {#        cache: false,#}
    {#        type: 'GET',#}
    {#        url: '{% url "users:my_fav" %}',#}
    {#        async: true,#}
    {#        beforeSend: function(xhr){#}
    {#            xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");#}
    {#        },#}
    {#        success: function(data){#}
    {#            console.log({{ movie_list }})#}
    {#            {% for movie in movie_list %}#}
    {#                console.log({{ movie.name }});#}
    {#                $('#my_favorite>.body').children($('<div class="movie">' +#}
    {#                    '<a href="{% url "movieinfo:movie_detail" movie.id %}">' +#}
    {#                    '<img src="{{ MEDIA_URL }}{{ movie.image }}">' +#}
    {#                    '<span>{{ movie.name }}</span>' +#}
    {#                    '</a></div>'));#}
    {#            {% endfor %}#}
    {#        }#}
    {#    });#}
    {# });#}
    //用户浏览
    //用户推荐
</script>
</html>
